<template>
    <div class="edit_container">
        <quill-editor
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
    </div>
</template>
<script>
export default {
  props: ['textContent'],
  data () {
    return {
      content: this.textContent,
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote'], // 引用
            ['code-block', 'image', 'link'] // 代码块, 上传图片、上传链接
          ]
        }
      }
    }
  },
  methods: {
    onEditorReady (editor) { // 准备编辑器
    },
    onEditorBlur () {
      this.$emit('change', this.content)
    }, // 失去焦点事件
    onEditorFocus () {
      this.$emit('change', this.content)
    }, // 获得焦点事件
    // 题干富文本
    onEditorChange () {
      // console.log(this.content)
      this.$emit('change', this.content)
    } // 内容改变事件
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>
<style scoped>
/deep/ .ql-editor {
  height: 200px!important;
}
</style>
